<div class="ms-PersonaCard ms-PersonaCard--square">
  <div class="ms-PersonaCard-persona">
    <div class="ms-Persona ms-Persona--square ms-Persona--xl">
      <div class="ms-Persona-imageArea">
        <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
        <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
      </div>
      <div class="ms-Persona-presence"></div>          
      <div class="ms-Persona-details">
        <div class="ms-Persona-primaryText">Alton Lafferty</div>
        <div class="ms-Persona-secondaryText">Interior Designer, Contoso</div>
        <div class="ms-Persona-tertiaryText">Office: 7/1234</div>
        <div class="ms-Persona-optionalText">Available - Video capable</div>
      </div>
    </div>
  </div>
  <ul class="ms-PersonaCard-actions">
    <li id="chat" class="ms-PersonaCard-action is-active"><i class="ms-Icon ms-Icon--chat"></i></li>
    <li id="phone" class="ms-PersonaCard-action"><i class="ms-Icon ms-Icon--phone"></i></li>
    <li id="video" class="ms-PersonaCard-action"><i class="ms-Icon ms-Icon--video"></i></li>
    <li id="mail" class="ms-PersonaCard-action"><i class="ms-Icon ms-Icon--mail"></i></li>
    <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
    <li id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart"><i class="ms-Icon ms-Icon--org"></i></li>
  </ul>
  <div class="ms-PersonaCard-actionDetailBox">
    <ul id="detailList" class="ms-PersonaCard-detailChat">
      <li id="chat" class="ms-PersonaCard-actionDetails detail-1">
        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
      </li>
      <li id="phone" class="ms-PersonaCard-actionDetails detail-2">
        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
      </li>
      <li id="video" class="ms-PersonaCard-actionDetails detail-3">
        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
      </li>
      <li id="mail" class="ms-PersonaCard-actionDetails detail-4">
        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a>
      </li>
      <!-- org chart -->
      <li id="org" class="ms-PersonaCard-actionDetails detail-5">
        <div class="ms-OrgChart">
          <div class="ms-OrgChart-group">
              <ul class="ms-OrgChart-list">
                  <li class="ms-OrgChart-listItem">
                    <button class="ms-OrgChart-listItemBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Russel Miller</div>
                          <div class="ms-Persona-secondaryText">Sales</div>
                        </div>
                      </div>
                    </button>
                  </li>
                  <li class="ms-OrgChart-listItem">
                    <button class="ms-OrgChart-listItemBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>                            
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Douglas Fielder</div>
                          <div class="ms-Persona-secondaryText">Public Relations</div>
                        </div>
                      </div>
                    </button>
                  </li>
              </ul>
          </div>
          <div class="ms-OrgChart-group">
            <div class="ms-OrgChart-groupTitle">Manager</div>
            <ul class="ms-OrgChart-list">
                <li class="ms-OrgChart-listItem">
                  <button class="ms-OrgChart-listItemBtn">
                    <div class="ms-Persona ms-Persona--square">
                      <div class="ms-Persona-imageArea">
                        <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                        <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                      </div>                            
                      <div class="ms-Persona-presence"></div>
                      <div class="ms-Persona-details">
                        <div class="ms-Persona-primaryText">Grant Steel</div>
                        <div class="ms-Persona-secondaryText">Sales</div>
                      </div>
                    </div>
                  </button>
                </li>
              </ul>
          </div>
          <div class="ms-OrgChart-group">
            <div class="ms-OrgChart-groupTitle">Staff</div>
            <ul class="ms-OrgChart-list">
              <li class="ms-OrgChart-listItem">
                <button class="ms-OrgChart-listItemBtn">
                  <div class="ms-Persona ms-Persona--square">
                    <div class="ms-Persona-imageArea">
                      <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                    </div>                            
                    <div class="ms-Persona-presence"></div>
                    <div class="ms-Persona-details">
                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
                      <div class="ms-Persona-secondaryText">Public Relations</div>
                    </div>
                  </div>
                </button>
              </li>
              <li class="ms-OrgChart-listItem">
                <button class="ms-OrgChart-listItemBtn">
                  <div class="ms-Persona ms-Persona--square">
                    <div class="ms-Persona-imageArea">
                      <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                    </div>                            
                    <div class="ms-Persona-presence"></div>
                    <div class="ms-Persona-details">
                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
                      <div class="ms-Persona-secondaryText">Technical Support</div>
                    </div>
                  </div>
                </button>
              </li>
              <li class="ms-OrgChart-listItem">
                <button class="ms-OrgChart-listItemBtn">
                  <div class="ms-Persona ms-Persona--square">
                    <div class="ms-Persona-imageArea">
                      <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                    </div>                            
                    <div class="ms-Persona-presence"></div>
                    <div class="ms-Persona-details">
                      <div class="ms-Persona-primaryText">Marcel Groce</div>
                      <div class="ms-Persona-secondaryText">Delivery</div>
                    </div>
                  </div>
                </button>
              </li>
              <li class="ms-OrgChart-listItem">
                <button class="ms-OrgChart-listItemBtn">
                  <div class="ms-Persona ms-Persona--square">
                    <div class="ms-Persona-imageArea">
                      <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                    </div>                            
                    <div class="ms-Persona-presence"></div>
                    <div class="ms-Persona-details">
                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
                      <div class="ms-Persona-secondaryText">Marketing</div>
                    </div>
                  </div>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <!-- /org chart -->
    </ul>
  </div>
  </div>
</div>